<template>
  <div>
    <div @keyup.enter="getParamsData()">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="params.corp_name"
            placeholder="负责人查询"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <select-address
            v-model="params.address_code"
            clearable
            placeholder="地址查询"
            :auto-top="true"
            @change="getParamsData()"
          ></select-address>
        </el-form-item>
        <el-form-item>
          <el-button @click="getParamsData()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
      :height="dialogHeight"
    ></c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getParamsData"
      ></el-pagination>
    </div>

    <!-- <attach-cmpt :visible.sync="attachVisible"
                 :customer-related-id="attachRelatedId"></attach-cmpt> -->

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs v-model="active">
        <el-tab-pane label="合同审批表" name="first">
          <contract-approve-self :query-id="queryId" view-mode></contract-approve-self>
        </el-tab-pane>
        <el-tab-pane label="合同信息" name="contract">
          <contract-guard-view :query-id="queryId"></contract-guard-view>
        </el-tab-pane>
        <el-tab-pane label="共同担保责任函" v-if="+relatedData.gua_type === 4">
          <union-letter :query-id="queryId" ref="union"></union-letter>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <attach-view :query-id="queryId" :visible="reportVisible"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <contract-approve-self-dialog
      :visible.sync="editVisibleSelf"
      :query-id="editQueryIdSelf"
      @success="handleSuccess"
    ></contract-approve-self-dialog>
  </div>
</template>

<script>
import { enumProcessStatus } from '@/credit/plugins/enumTown'
import taskTableMixin from '@/credit/mixin/task/taskTable'
import SelectAddress from '@/components/select/SelectAddress'
// import AttachCmpt from '@/credit/views/city/program/Attach'
import { getWfKey } from '@/credit/views/county/unionProvince/components/contractApproveDeploy/index'
import ContractGuardView from '@/credit/views/county/unionProvince/components/ContractGuardView'
import unionLetter from '@/credit/views/county/unionProvince/components/unionLetter/Index'
import AttachView from '@/credit/components/AttachView'
import { getFollow } from '@/credit/mixin/taskTableCountyUnionProvince'

import ContractApproveSelf from '@/credit/views/city/self/components/contractApprove/Main'
import ContractApproveSelfDialog from '@/credit/views/city/self/components/contractApprove/MainDialog'
import { mapGetters } from 'vuex'
export default {
  components: {
    SelectAddress,
    unionLetter,
    ContractGuardView,
    AttachView,
    ContractApproveSelf,
    ContractApproveSelfDialog,
  },
  mixins: [taskTableMixin],
  data() {
    return {
      params: {
        index: 1,
        size: 10,
      },
      order: {
        create_time: 'desc',
      },
      tableColumns: [
        {
          attrs: { label: '主体名称', prop: 'customer_name', minWidth: 135 },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '地址', prop: 'address', minWidth: 135 } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', minWidth: 120 } },
        { attrs: { label: '审批金额(万元)', prop: 'approvalFunds', align: 'center' } },
        { attrs: { label: '待处理人员', prop: 'itemStatusLabel', align: 'center' } },
        { attrs: { label: '审批模式', prop: 'processLabel', width: 110, align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', width: 130 },
          operations: [
            {
              content: '审批',
              icon: 'fa fa-gavel',
              event: this.handleEdit,
              ifRender: row => +row.task_status === 0,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
            // { content: '附件', icon: 'fa fa-clipboard', event: this.handleAttach }
          ],
        },
      ],
      tableData: [],
      loading: false,
      totalCount: 0,
      active: 'first',
      attachVisible: false,
      attachRelatedId: '',
      editQueryIdSelf: '',
      editVisibleSelf: false,
      queryId: '',
      reportVisible: false,
      relatedData: {},
    }
  },
  computed: {
    ...mapGetters(['user']),
    isUnion() {
      return this.user?.scopeArr?.includes('dirGuaPro') ?? false
    },
  },
  created() {},
  methods: {
    async getParamsData(index = 1) {
      this.params.subKey = 'entrust_contract.customer_related_id'
      await this.getData(index)
      const record = await getFollow(
        this.tableData.filter(item => +item.gua_type !== 2),
        getWfKey(this.isUnion)
      )
      const recordSelf = await getFollow(
        this.tableData.filter(item => +item.gua_type === 2),
        'CONTRACT_APPROVAL_DIR'
      )
      const datas = record && record.length ? record.concat(recordSelf) : recordSelf

      this.tableData = this.tableData.map(it => {
        const data = datas.find(item => item.wf_related_id === it.customer_related_id) || {}
        it.itemStatusLabel = data.innerFollow || ''
        return it
      })
    },
    handleAttach(row) {
      this.attachVisible = true
      this.attachRelatedId = row.customer_related_id
    },
    dataAdapter(item) {
      const approve = item?.entrust_contract?.[0] ?? {}
      item.approvalFunds = approve.reply_funds || item.approved_funds
      item.processLabel = enumProcessStatus[+item.process_status] || ''
      if (+item.gua_type === 2) {
        item.processLabel = '直担业务'
      }
      return item
    },
    handleEdit(row = {}) {
      this.editQueryIdSelf = row.customer_related_id
      this.editVisibleSelf = true
    },
    handleView(row = {}) {
      this.active = 'first'
      this.queryId = row.customer_related_id
      this.relatedData = row
      this.reportVisible = true
    },
    handleSuccess(res) {
      this.$store.dispatch('getMyTaskCount')
      this.$emit('success', res)
    },
  },
}
</script>
<style lang="scss" scoped></style>
